// pages/index/index.vue - 首页
<template>
  <view class="container">
    <view class="header">
      <image class="logo" src="/static/mbti-logo.png" mode="aspectFit"></image>
      <text class="title">MBTI人格测试</text>
      <text class="subtitle">探索你的性格类型</text>
    </view>
    
    <view class="intro-card">
      <text class="intro-title">迈尔斯-布里格斯类型指标</text>
      <text class="intro-text">MBTI是一种性格类型测试，可以帮助你了解自己的思考方式、决策倾向以及与世界互动的方式。完成测试后，你将获得16种性格类型之一的结果。</text>
    </view>
    
    <button class="start-btn" @click="startTest">开始测试</button>
    
    <view class="feature-list">
      <view class="feature-item">
        <text class="feature-icon">📊</text>
        <text class="feature-text">93道专业题目</text>
      </view>
      <view class="feature-item">
        <text class="feature-icon">⏱️</text>
        <text class="feature-text">10-15分钟完成</text>
      </view>
      <view class="feature-item">
        <text class="feature-icon">📱</text>
        <text class="feature-text">结果可保存分享</text>
      </view>
    </view>
    
    <navigator url="/pages/types/types" class="nav-btn">了解16种人格类型</navigator>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    startTest() {
      uni.navigateTo({
        url: '/pages/test/test'
      });
    }
  }
};
</script>

<style>
.container {
  padding: 30rpx;
}
.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 50rpx;
}
.logo {
  width: 160rpx;
  height: 160rpx;
  margin-bottom: 20rpx;
}
.title {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
}
.subtitle {
  font-size: 32rpx;
  color: #666;
  margin-top: 10rpx;
}
.intro-card {
  background-color: #f7f7f7;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 40rpx;
}
.intro-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #444;
}
.intro-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}
.start-btn {
  background-color: #4a6bff;
  color: white;
  font-size: 36rpx;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 45rpx;
  margin: 30rpx 0 50rpx;
}
.feature-list {
  display: flex;
  justify-content: space-between;
  margin-bottom: 60rpx;
}
.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 30%;
}
.feature-icon {
  font-size: 48rpx;
  margin-bottom: 10rpx;
}
.feature-text {
  font-size: 24rpx;
  color: #666;
  text-align: center;
}
.nav-btn {
  text-align: center;
  font-size: 30rpx;
  color: #4a6bff;
  padding: 20rpx;
  border: 1px solid #4a6bff;
  border-radius: 45rpx;
}
</style>
